<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.share" :background="background" :border-bottom="false" title-color="#fff"
			back-icon-color="#fff">
		
		</u-navbar>
		<view class="all">
			<view class="background">
				<image src="../../../static/images/shareback.png" mode=""></image>
			</view>
			<view class="top">
				<view class="head">
					<image :src="avatar ? avatar : '../../../static/images/simple.webp'"  :onerror="defaultAvatar" mode=""></image>
					<text>{{name}}</text>
				</view>
				<view class="title">
					<text>{{documents}}</text>
				</view>
			</view>
			<view class="bot">
				<view class="code">
					<tki-qrcode ref="qrcode" :val="link" :size="380" :onval="true"  @result="qrR" />
				</view>
				<view class="share_href">
					<view>
						{{i18n.share.link}}:
					</view>
					<text>
						{{link}}
					</text>
				</view>
				<view class="button" @click="copyBtn">
					{{i18n.share.copy}}
				</view>
			</view>

		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#304156',
				},
				
				avatar: "",
				documents: "",
				link: "",
				name: "",
				realName: ""
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
			defaultAvatar() {
			  return 'this.src="'+ require('../../../static/images/simple.webp') +'"'
			}
		},
		onShow() {
			this.lang()
		},
		onLoad() {
			this.getInviteData();
		},
		mounted() {
			
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			copyBtn(){
				var that = this;
				uni.setClipboardData({
					data: that.link,
					success: function () {
						uni.showToast({
							title: that.i18n.share.copy_success,
							icon: 'none',
							duration: 3000
						})
					},
					fail: function () {
						uni.showToast({
							title: that.i18n.share.copy_fail,
							icon: 'none',
							duration: 3000
						})
					},
				});

			},
			getInviteData() {
				global.$http.request({
					url: '/api/admin/merchant/invite',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						this.avatar = res.data.data.avatar;
						this.documents = res.data.data.documents;
						this.link = res.data.data.link;
						this.name = res.data.data.name;
						this.realName = res.data.data.realName;
						this.$refs.qrcode._makeCode();
					}
				})
			},
			qrR(result) {},
			
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {
			margin-top: 20rpx;


			.all {
				.background {

					image {
						position: absolute;
						top: 0rpx;
						z-index: 0;
						width: 750rpx;
						height: 405rpx;
					}
				}

				.top {
					display: flex;
					flex-direction: column;
					align-items: center;

					.head {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							border-radius: 100%;
							width: 168rpx;
							height: 168rpx;
						}

						text {
							padding: 11rpx 0 32rpx 0;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							z-index: 1;
						}
					}

					.title {

						width: 690rpx;
						height: 184rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 50rpx 30rpx;
						line-height: 40rpx;
						z-index: 1;
						text {
							display: block;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #141414;
						}

					}

				}

				.bot {
					margin-top: 20rpx;
					background-color: #fff;
					width: 750rpx;

					.code {
						padding: 41rpx 0;
						text-align: center;
						margin: 0 auto;
					}
					.share_href{
						padding: 11rpx 38rpx;
						view{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #141414;
						}
						text{
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #141414;
						}
					}
					.button{
						
						width: 640rpx;
						height: 78rpx;
						margin: 73rpx auto;
						background: #304156;
						border-radius: 39rpx;
						
						
					text-align: center;
					line-height: 78rpx;
						font-size: 26rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
